import React from "react";
import ReactDOM from "react-dom/client";

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>App</h1>

        <form>
          <div>
            <label>
              <span>用户名</span>
              <input type="text" />
            </label>
          </div>
          <div>
            <label>
              <span>密码</span>
              <input type="text" />
            </label>
          </div>
          <div>
            <label>
              <span>性别</span>
              <input type="radio" /> 男
              <input type="radio" /> 女
            </label>
          </div>
          <div>
            <label>
              <span>喜欢的水果</span>
              <input type="checkbox" /> Apple
              <input type="checkbox" /> Banana
              <input type="checkbox" /> Orange
            </label>
          </div>
          <div>
            <label>
              <span>城市</span>
              <select>
                <option value="">请选择</option>
                <option>深圳</option>
                <option>广州</option>
                <option>上海</option>
                <option>北京</option>
              </select>
            </label>
          </div>

          <button>注册</button>
        </form>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
